<template lang="pug">
transition(name="screening")
  .screening-mask(v-if="show" @click.self="close")
    .screening
      .screening-container
        .cate-col
          .cate-col-container
            .cate-col-title 我的项目
            .cate-col-body
              .cate-col-list(v-if="myProjectList.personalProject.length")
                .cate-item-row-title
                  .iconfont.icon-folder
                  span 个人项目
                .cate-item-row-body
                  .cate-item-row(v-for="row in myProjectList.personalProject" @click="selectProject(row, 'project')") {{row.projectName}}
              .cate-col-list(v-if="myProjectList.companyProjectJoin.length")
                .cate-item-row-title
                  .iconfont.icon-folder
                  span 团队项目
                .cate-item-row-body
                  .cate-item-row(v-for="row in myProjectList.teamProject" @click="selectProject(row, 'project')") {{row.projectName}}
            .cate-col-title(v-if="projectIslandList.length") 项目岛项目
            .cate-col-body
              .cate-item-row-body
                .cate-item-row(v-for="row in projectIslandList" @click="selectProject(row, 'island')") {{row.name}}
      //- .screening-footer
        a.screening-btn.btn-cancel 重置
        a.screening-btn.btn-confirm() 搜索
</template>

<script>
import { mapActions, mapState } from 'vuex'
import { getMyProject, getLandProjectList, projectIslandLogin } from 'api'
export default {
  name: 'projectModal',
  data () {
    return {
      myProjectList: {
        personalProject: [],
        teamProject: [],
        companyProjectJoin: [],
        companyProjectSelf: []
      },
      projectIslandList: []
    }
  },
  computed: {
    ...mapState({
      show: state => state.ui.projectList.show,
      materialDetail: state => state.ui.projectList.materialDetail,
      userInfo: state => state.user.user
    })
  },
  watch: {
    show (v) {
      if (v) this.init()
    }
  },
  methods: {
    ...mapActions([
      'changeProjectModal',
      'changeAddMaterial'
    ]),
    close () {
      this.changeProjectModal({ show: false, materialDetail: {} })
    },
    selectProject (row, type) {
      this.changeAddMaterial({ show: true, item: { ...row, customType: type }, detail: this.materialDetail })
    },
    init () {
      this.getMyProject()
      if (this.userInfo.isCompany) this.getLandProjectList()
    },
    async getMyProject () {
      try {
        const { ResultSet } = await this.$axios.post(getMyProject)
        this.myProjectList = ResultSet.userData
        this.myProjectList.teamProject = [...ResultSet.userData.companyProjectJoin, ...ResultSet.userData.companyProjectSelf]
      } catch (err) {
        this.message({ show: true, content: err.message || err.ResultSet.errors })
        console.log(err)
      }
    },
    async getLandProjectList () {
      try {
        await this.projectIslandLogin()
        const { ResultSet } = await this.$axios.post(getLandProjectList)
        this.projectIslandList = ResultSet.userData.data
      } catch (err) {
        this.message({ show: true, content: err.message || err.ResultSet.errors })
        console.log(err)
      }
    },
    async projectIslandLogin () {
      try {
        await this.$axios.post(projectIslandLogin)
      } catch (err) {
        this.message({ show: true, content: err.message || err.ResultSet.errors })
        console.log(err)
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.screening-leave-active {
  transition: opacity .3s ease;
}
.screening-enter-active,.screening-leave-active {
  opacity: 0
}
.screening-enter-active .screening,
.screening-leave-active .screening {
  transform: translateX(100%);
  opacity: 0;
}
.screening-mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 8888;
  background: rgba(0,0,0,.5)
}
.screening {
  transition: all .3s;
  position: fixed;
  width: 300px;
  height: 100%;
  top: 0;
  right: 0;
  background: #f5f5f5;
  z-index: 9999;
}
.screening-container {
  // display: flex;
  height: 100%;
  overflow: auto;
}
.screening-footer {
  height: 60px;
  box-shadow: 0 -10px 20px 0 rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  font-size: 18px;
  & .btn-confirm {
    background: #CD9E78;
    color: #fff;
  }
  & .screening-btn {
    display: flex;
    height: 100%;
    width: 50%;
    align-items: center;
    justify-content: center;
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
  }
}
.cate-col {
  width: 100%;
  padding: 0 10px;
  .cate-col-title {
    // height: 54px;
    font-size: 24px;
    font-weight: bold;
    padding: 15px 0;
    color: #CD9E78;
  }
  .cate-col-container {
    height: 100%;
  }
  .cate-col-body {
    overflow-y: overlay;
  }
  .cate-item-row {
    padding: 10px 0;
    cursor: pointer;
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #7b7b7b;
    &.active {
      background: #E5E5E5;
      color: #CD9E78;
    }
  }
}
.cate-col-body {
  padding-left: 20px;
}
.cate-item-row-body {
  padding-left: 20px;
}
.cate-item-row-title {
  font-size: 18px;
  color: #CD9E78;
  font-weight: bold;
  display: flex;
  align-items: center;
  .iconfont {
    font-size: 24px;
    margin-right: 8px;
  }
}
</style>